<!DOCTYPE html><html lang="en" class="text-gray-500 antialiased bg-white"><head><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-YK9KKZB935"></script><script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-YK9KKZB935', {
              page_path: window.location.pathname,
            });
          </script><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/manifest.json"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00b4b6"/><meta name="theme-color" content="#ffffff"/><meta name="description" content="Tailwind CSS 是一个功能类优先的 CSS 框架，它由 Adam Wathan 创建。本站提供 Tailwind CSS 官方文档中文翻译致力于为广大国内开发者提供准确的中文文档，助力开发者掌握并使用这一框架。"/><meta name="keywords" content="Tailwind CSS, CSS 框架, CSS framework, Tailwind CSS 中国, Tailwind CSS 中文文档, Tailwind CSS 代码,Tailwind CSS 入门"/><meta name="author" content="TailwindCSS中文网"/><meta name="google-site-verification" content="K6lmDHP95YNtBrmzbE8A5HivIoXC9kPq47XvdBM3jVY"/><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><meta name="twitter:site" content="@tailwindcss"/><meta name="twitter:description" content="Documentation for the Tailwind CSS framework."/><meta name="twitter:creator" content="@tailwindcss"/><meta property="og:url" content="https://tailwindcss.com/docs"/><meta property="og:type" content="article"/><meta property="og:description" content="Documentation for the Tailwind CSS framework."/><meta property="og:image" content="https://tailwindcss.com/_next/static/media/twitter-large-card.85c0ff9e455da585949ff0aa50981857.jpg"/><link rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"/><title>中文文档 - Tailwind CSS</title><meta name="twitter:title" content="中文文档 - Tailwind CSS"/><meta property="og:title" content="中文文档 - Tailwind CSS"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://tailwindcss.com/_next/static/media/twitter-square.daf77586b35e90319725e742f6e069f9.jpg"/><link rel="preload" href="/_next/static/css/91ad8a1bc71db66a58e6.css" as="style" crossorigin="anonymous"/><link rel="stylesheet" href="/_next/static/css/91ad8a1bc71db66a58e6.css" crossorigin="anonymous" data-n-g=""/><link rel="preload" href="/_next/static/css/7733808258a47b2b12d4.css" as="style" crossorigin="anonymous"/><link rel="stylesheet" href="/_next/static/css/7733808258a47b2b12d4.css" crossorigin="anonymous" data-n-p=""/><noscript data-n-css="true"></noscript><link rel="preload" href="/_next/static/chunks/main-53486d82b2545edae223.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/webpack-07c5bcab23dc3e52a7c0.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/framework.dc32737cd22c934f019a.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/commons.22d76c353a4f72632887.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.1d9cdb0d7e423ae8ff11.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/pages/_app-22af6c3e18ff3a768b97.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/cecf69130dad263f9cb4ff787dd0f2dc73bfee9f.a38ff4d7f346d15b14bc.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/pages/docs-fafc39d296fe4300f902.module.js" as="script" crossorigin="anonymous"/></head><body><div id="__next"><div class="sticky top-0 z-40 lg:z-50 w-full max-w-8xl mx-auto bg-white flex-none flex"><div class="flex-none pl-4 sm:pl-6 xl:pl-8 flex items-center border-b border-gray-200 lg:border-b-0 lg:w-60 xl:w-72"><a class="overflow-hidden w-10 md:w-auto" href="/"><span class="sr-only">Tailwind CSS home page</span><svg viewBox="0 0 247 31" class="w-auto h-6"><path fill-rule="evenodd" clip-rule="evenodd" d="M25.517 0C18.712 0 14.46 3.382 12.758 10.146c2.552-3.382 5.529-4.65 8.931-3.805 1.941.482 3.329 1.882 4.864 3.432 2.502 2.524 5.398 5.445 11.722 5.445 6.804 0 11.057-3.382 12.758-10.145-2.551 3.382-5.528 4.65-8.93 3.804-1.942-.482-3.33-1.882-4.865-3.431C34.736 2.92 31.841 0 25.517 0zM12.758 15.218C5.954 15.218 1.701 18.6 0 25.364c2.552-3.382 5.529-4.65 8.93-3.805 1.942.482 3.33 1.882 4.865 3.432 2.502 2.524 5.397 5.445 11.722 5.445 6.804 0 11.057-3.381 12.758-10.145-2.552 3.382-5.529 4.65-8.931 3.805-1.941-.483-3.329-1.883-4.864-3.432-2.502-2.524-5.398-5.446-11.722-5.446z" fill="#06B6D4"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M76.546 12.825h-4.453v8.567c0 2.285 1.508 2.249 4.453 2.106v3.463c-5.962.714-8.332-.928-8.332-5.569v-8.567H64.91V9.112h3.304V4.318l3.879-1.143v5.937h4.453v3.713zM93.52 9.112h3.878v17.849h-3.878v-2.57c-1.365 1.891-3.484 3.034-6.285 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.285 2.999V9.112zm-5.674 14.636c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm16.016-17.313c-1.364 0-2.477-1.142-2.477-2.463a2.475 2.475 0 012.477-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.879v17.849h-3.879zm8.368 0V.9h3.878v26.06h-3.878zm29.053-17.849h4.094l-5.638 17.849h-3.807l-3.735-12.03-3.771 12.03h-3.806l-5.639-17.849h4.094l3.484 12.315 3.771-12.315h3.699l3.734 12.315 3.52-12.315zm8.906-2.677c-1.365 0-2.478-1.142-2.478-2.463a2.475 2.475 0 012.478-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.878v17.849h-3.878zm17.812-18.313c4.022 0 6.895 2.713 6.895 7.354V26.96h-3.878V16.394c0-2.713-1.58-4.14-4.022-4.14-2.55 0-4.561 1.499-4.561 5.14v9.567h-3.879V9.112h3.879v2.285c1.185-1.856 3.124-2.749 5.566-2.749zm25.282-6.675h3.879V26.96h-3.879v-2.57c-1.364 1.892-3.483 3.034-6.284 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.284 2.999V1.973zm-5.674 21.775c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm22.553 3.677c-5.423 0-9.481-4.105-9.481-9.389 0-5.318 4.058-9.388 9.481-9.388 3.519 0 6.572 1.82 8.008 4.605l-3.34 1.928c-.79-1.678-2.549-2.749-4.704-2.749-3.16 0-5.566 2.392-5.566 5.604 0 3.213 2.406 5.605 5.566 5.605 2.155 0 3.914-1.107 4.776-2.749l3.34 1.892c-1.508 2.82-4.561 4.64-8.08 4.64zm14.472-13.387c0 3.249 9.661 1.285 9.661 7.89 0 3.57-3.125 5.497-7.003 5.497-3.591 0-6.177-1.607-7.326-4.177l3.34-1.927c.574 1.606 2.011 2.57 3.986 2.57 1.724 0 3.052-.571 3.052-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.909-5.462 6.572-5.462 2.945 0 5.387 1.357 6.644 3.713l-3.268 1.82c-.647-1.392-1.904-2.035-3.376-2.035-1.401 0-2.622.607-2.622 1.892zm16.556 0c0 3.249 9.66 1.285 9.66 7.89 0 3.57-3.124 5.497-7.003 5.497-3.591 0-6.176-1.607-7.326-4.177l3.34-1.927c.575 1.606 2.011 2.57 3.986 2.57 1.724 0 3.053-.571 3.053-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.908-5.462 6.572-5.462 2.944 0 5.386 1.357 6.643 3.713l-3.268 1.82c-.646-1.392-1.903-2.035-3.375-2.035-1.401 0-2.622.607-2.622 1.892z" fill="#000"></path></svg></a></div><div class="flex-auto border-b border-gray-200 h-18 flex items-center justify-between px-4 sm:px-6 lg:mx-6 lg:px-0 xl:mx-8"><button type="button" class="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 hover:text-gray-600 transition-colors duration-200"><svg width="24" height="24" fill="none" class="text-gray-400 group-hover:text-gray-500 transition-colors duration-200"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>快速搜索<span class="hidden sm:inline"> 一切</span></span></button><div class="flex items-center space-x-6"><form class="relative hidden lg:block"><label><span class="sr-only">Tailwind CSS Version</span><select class="appearance-none block bg-transparent pr-7 py-1 text-gray-500 font-medium text-sm focus:outline-none focus:text-gray-900 transition-colors duration-200"><option value="v2">v<!-- -->2.0.2</option><option value="v1">v1.9.6</option><option value="v0">v0.7.4</option></select></label><svg class="w-5 h-5 text-gray-400 absolute top-1/2 right-0 -mt-2.5 pointer-events-none" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path></svg></form><a href="https://github.com/tailwindlabs/tailwindcss" class="text-gray-400 hover:text-gray-500 transition-colors duration-200"><span class="sr-only">Tailwind CSS on GitHub</span><svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></div><button type="button" class="fixed z-50 bottom-4 right-4 w-16 h-16 rounded-full bg-gray-900 text-white block lg:hidden"><span class="sr-only">Open site navigation</span><svg width="24" height="24" fill="none" class="absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform"><path d="M4 8h16M4 16h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><svg width="24" height="24" fill="none" class="absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform opacity-0 scale-80"><path d="M6 18L18 6M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="w-full max-w-8xl mx-auto"><div class="lg:flex"><div id="sidebar" class="fixed z-40 inset-0 flex-none h-full bg-black bg-opacity-25 w-full lg:bg-white lg:static lg:h-auto lg:overflow-y-visible lg:pt-0 lg:w-60 xl:w-72 lg:block hidden"><div id="navWrapper" class="h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:relative lg:sticky lg:bg-transparent overflow-hidden lg:top-18 bg-white mr-24 lg:mr-0"><div class="hidden lg:block h-12 pointer-events-none absolute inset-x-0 z-10 bg-gradient-to-b from-white"></div><nav id="nav" class="px-1 pt-6 overflow-y-auto font-medium text-base sm:px-3 xl:px-5 lg:text-sm pb-10 lg:pt-10 lg:pb-16 sticky?lg:h-(screen-18)"><div class="relative flex mb-8 px-3 lg:hidden"><form class="relative"><label><span class="sr-only">Tailwind CSS Version</span><select class="appearance-none block bg-transparent pr-7 py-1 text-gray-500 font-medium text-sm focus:outline-none focus:text-gray-900 transition-colors duration-200"><option value="v2">v<!-- -->2.0.2</option><option value="v1">v1.9.6</option><option value="v0">v0.7.4</option></select></label><svg class="w-5 h-5 text-gray-400 absolute top-1/2 right-0 -mt-2.5 pointer-events-none" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path></svg></form></div><ul><li><a href="/docs" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4 text-gray-900"><div class="mr-3 rounded-md bg-gradient-to-br from-pink-500 to-rose-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 6C10.0929 6 11.1175 6.29218 12 6.80269V16.8027C11.1175 16.2922 10.0929 16 9 16C7.90714 16 6.88252 16.2922 6 16.8027V6.80269C6.88252 6.29218 7.90714 6 9 6Z" fill="#FFF1F2"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15 6C16.0929 6 17.1175 6.29218 18 6.80269V16.8027C17.1175 16.2922 16.0929 16 15 16C13.9071 16 12.8825 16.2922 12 16.8027V6.80269C12.8825 6.29218 13.9071 6 15 6Z" fill="#FECDD3"></path></svg></div>中文文档</a></li><li><a href="https://tailwindui.com/components?utm_source=tailwindcss&amp;utm_medium=navigation" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-purple-500 to-indigo-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path d="M6 9l6-3 6 3v6l-6 3-6-3V9z" fill="#F5F3FF"></path><path d="M6 9l6 3v6l-6-3V9z" fill="#DDD6FE"></path><path d="M18 9l-6 3v6l6-3V9z" fill="#C4B5FD"></path></svg></div>组件</a></li><li><a href="https://play.tailwindcss.com" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-yellow-400 to-orange-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.196 6.02a1 1 0 01.785 1.176l-2 10a1 1 0 01-1.961-.392l2-10a1 1 0 011.176-.784z" fill="#FDE68A"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.293 9.293a1 1 0 011.414 0l2 2a1 1 0 010 1.414l-2 2a1 1 0 01-1.414-1.414L16.586 12l-1.293-1.293a1 1 0 010-1.414zM8.707 9.293a1 1 0 010 1.414L7.414 12l1.293 1.293a1 1 0 11-1.414 1.414l-2-2a1 1 0 010-1.414l2-2a1 1 0 011.414 0z" fill="#FDF4FF"></path></svg></div>在线运行环境</a></li><li><a href="https://blog.tailwindcss.com" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-green-400 to-cyan-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path d="M8 9a1 1 0 011-1h8a1 1 0 011 1v7.5a1.5 1.5 0 01-1.5 1.5h-7A1.5 1.5 0 018 16.5V9z" fill="#6EE7B7"></path><path d="M15 7a1 1 0 00-1-1H7a1 1 0 00-1 1v9.5A1.5 1.5 0 007.5 18H16v-.085a1.5 1.5 0 01-1-1.415V7z" fill="#ECFDF5"></path><path fill="#A7F3D0" d="M8 8h5v4H8zM8 14h5v2H8z"></path></svg></div>新闻</a></li><li><a href="/resources" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-light-blue-400 to-indigo-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path d="M17 13a1 1 0 011 1v3a1 1 0 01-1 1H8.5a2.5 2.5 0 010-5H17z" fill="#93C5FD"></path><path d="M12.743 7.722a1 1 0 011.414 0l2.122 2.121a1 1 0 010 1.414l-6.01 6.01a2.5 2.5 0 11-3.536-3.536l6.01-6.01z" fill="#BFDBFE"></path><path d="M6 7a1 1 0 011-1h3a1 1 0 011 1v8.5a2.5 2.5 0 01-5 0V7z" fill="#EFF6FF"></path><path d="M9.5 15.5a1 1 0 11-2 0 1 1 0 012 0z" fill="#60A5FA"></path></svg></div>资源</a></li><li><a href="https://www.youtube.com/tailwindlabs" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-10"><div class="mr-3 rounded-md bg-gradient-to-br from-fuchsia-500 to-purple-600"><svg class="h-6 w-6" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="#F3E8FF"></circle><path d="M14.52 11.136a1 1 0 010 1.728l-3.016 1.759A1 1 0 0110 13.759v-3.518a1 1 0 011.504-.864l3.015 1.76z" fill="#C084FC"></path></svg></div>视频</a></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">入门</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/installation"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">安装</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="https://blog.tailwindcss.com/tailwindcss-v2"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">发布说明</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/upgrading-to-v2"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">升级指南</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/using-with-preprocessors"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">使用预处理器</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/optimizing-for-production"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">生产优化</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/browser-support"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">浏览器支持</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/intellisense"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">智能感知</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">核心概念</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/utility-first"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">功能优先</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/responsive-design"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">响应式设计</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/hover-focus-and-other-states"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">悬停、焦点和其它状态</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/dark-mode"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">深色模式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/adding-base-styles"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">添加基础样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/extracting-components"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">提取组件</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/adding-new-utilities"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">添加新的功能类</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/functions-and-directives"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">函数与指令</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">定制</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/configuration"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">配置</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/theme"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">主题</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/breakpoints"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">断点</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/customizing-colors"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/customizing-spacing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">间距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/configuring-variants"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">变体</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/plugins"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">插件</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/presets"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">预设</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">基础样式</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/preflight"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Preflight</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">布局</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/container"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">容器</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/box-sizing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Box Sizing</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/display"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Display</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/float"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">浮动</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/clear"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">清除浮动</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/object-fit"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Object Fit</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/object-position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Object Position</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/overflow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">溢出</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/overscroll-behavior"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Overscroll Behavior</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">定位</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/top-right-bottom-left"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Top / Right / Bottom / Left</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/visibility"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">可见性</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/z-index"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Z-Index</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">盒模型</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-direction"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Direction</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-wrap"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Wrap</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-grow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Grow</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-shrink"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Shrink</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/order"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Order</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">网格</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-template-columns"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Template Columns</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-column"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Column Start / End</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-template-rows"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Template Rows</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-row"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Row Start / End</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-auto-flow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Auto Flow</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-auto-columns"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Auto Columns</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-auto-rows"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Auto Rows</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/gap"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Gap</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">盒对齐</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/justify-content"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Justify Content</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/justify-items"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Justify Items</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/justify-self"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Justify Self</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/align-content"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Align Content</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/align-items"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Align Items</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/align-self"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Align Self</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/place-content"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Place Content</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/place-items"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Place Items</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/place-self"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Place Self</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">间距</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/padding"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">内边距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/margin"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">外边距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/space"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Space Between</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">尺寸</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">宽度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/min-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最小宽度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/max-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最大宽度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">高度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/min-height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最小高度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/max-height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最大高度</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">排版</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-family"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体序列</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-size"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体大小</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-smoothing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体平滑度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-style"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-weight"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体粗细</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-variant-numeric"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Font Variant Numeric</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/letter-spacing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字母间距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/line-height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">行高</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/list-style-type"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">列表项标记类型</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/list-style-position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">列表项标记位置</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/placeholder-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">占位文本颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/placeholder-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">占位文本不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-align"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本对齐</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本颜色不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-decoration"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本装饰</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-transform"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本转换</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-overflow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本溢出</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/vertical-align"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">垂直对齐</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/whitespace"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">空格</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/word-break"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本换行</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">背景</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-attachment"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像固定</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-clip"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像裁剪</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景颜色不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像位置</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-repeat"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像重复</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-size"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像大小</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-image"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/gradient-color-stops"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">渐变色停止</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">边框</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-radius"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框圆角</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-style"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-style"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-offset-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环偏移厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-offset-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环偏移颜色</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">特效</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/box-shadow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">盒阴影</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">不透明度</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">表格</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-collapse"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">表格边框</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/table-layout"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">表格布局</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">过渡和动画</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-property"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡属性</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-duration"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡持续时间</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-timing-function"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡计时函数</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-delay"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡延迟</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/animation"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">动画</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">转换</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transform"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">变换</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transform-origin"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">变换原点</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/scale"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">缩放</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/rotate"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">旋转</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/translate"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">平移</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/skew"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">倾斜</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">交互</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/appearance"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">表单外观</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/cursor"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">光标效果</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/outline"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/pointer-events"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">指向事件</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/resize"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">大小调整</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/user-select"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">用户选择</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">SVG</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/fill"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">填充</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/stroke"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">线条</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/stroke-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">线条厚度</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">可访问性</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/screen-readers"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">屏幕阅读器</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">官方插件</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/typography-plugin"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">排版</span></a></li></ul></li></ul></nav></div></div><div id="content-wrapper" class="min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible"><div class="px-4 sm:px-6 xl:px-8 pt-10 pb-16"><h1 class="text-5xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">开始 Tailwind CSS 之旅</h1><p class="text-2xl tracking-tight mb-10">用最适合您的方式学习 Tailwind</p><div class="grid grid-cols-1 md:grid-cols-3 gap-6 xl:gap-8"><section class="flex"><div class="w-full relative text-white overflow-hidden rounded-3xl flex shadow-lg"><div class="w-full flex md:flex-col bg-gradient-to-br from-purple-500 to-indigo-500"><div class="sm:max-w-sm sm:flex-none md:w-auto md:flex-auto flex flex-col items-start relative z-10 p-6 xl:p-8"><h2 class="text-xl font-semibold mb-2 text-shadow">阅读文档</h2><p class="font-medium text-violet-100 text-shadow mb-4">学习如何在您的工程中加入 Tailwind</p><a class="mt-auto bg-violet-800 bg-opacity-50 hover:bg-opacity-75 transition-colors duration-200 rounded-xl font-semibold py-2 px-4 inline-flex" href="/docs/installation">开始学习</a></div><div class="docs_image__1HDuG relative md:pl-6 xl:pl-8 hidden sm:block"><svg viewBox="0 0 352 232" width="352" height="232" fill="none" class="absolute top-6 left-6 md:static overflow-visible"><g opacity="0.8"><g filter="url(#guides_svg__filter0_dd)"><rect width="352" height="232" rx="12" fill="#fff"></rect></g><path fill="#DDD6FE" d="M107 27h208v1H107z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M46 8c-2.4 0-3.9 1.212-4.5 3.637.9-1.213 1.95-1.667 3.15-1.364.685.173 1.174.675 1.716 1.23.882.905 1.903 1.952 4.134 1.952 2.4 0 3.9-1.212 4.5-3.637-.9 1.213-1.95 1.667-3.15 1.364-.685-.173-1.174-.675-1.716-1.23C49.252 9.047 48.231 8 46 8zm-4.5 5.456c-2.4 0-3.9 1.212-4.5 3.636.9-1.212 1.95-1.666 3.15-1.363.685.173 1.174.674 1.716 1.23.882.905 1.903 1.952 4.134 1.952 2.4 0 3.9-1.212 4.5-3.637-.9 1.212-1.95 1.667-3.15 1.364-.685-.173-1.174-.675-1.716-1.23-.882-.905-1.903-1.952-4.134-1.952z" fill="#A78BFA"></path><rect x="48" y="43" width="25" height="4" rx="2" fill="#C4B5FD"></rect><rect x="255" y="43" width="25" height="4" rx="2" fill="#DDD6FE"></rect><rect x="255" y="51" width="32" height="4" rx="2" fill="#DDD6FE"></rect><rect x="255" y="59" width="24" height="4" rx="2" fill="#DDD6FE"></rect><rect x="255" y="67" width="35" height="4" rx="2" fill="#DDD6FE"></rect><rect x="255" y="75" width="22" height="4" rx="2" fill="#DDD6FE"></rect><rect x="107" y="42" width="57" height="8" rx="4" fill="#A78BFA"></rect><rect x="107" y="54" width="121" height="4" rx="2" fill="#C4B5FD"></rect><rect x="121" y="11" width="49" height="4" rx="2" fill="#DDD6FE"></rect><rect x="292" y="11" width="11" height="4" rx="2" fill="#DDD6FE"></rect><rect x="107" y="70" width="129" height="4" rx="2" fill="#DDD6FE"></rect><rect x="107" y="177" width="129" height="4" rx="2" fill="#DDD6FE"></rect><rect x="107" y="129" width="137" height="4" rx="2" fill="#DDD6FE"></rect><rect x="107" y="137" width="137" height="4" rx="2" fill="#DDD6FE"></rect><rect x="107" y="211" width="129" height="4" rx="2" fill="#DDD6FE"></rect><rect x="107" y="78" width="129" height="4" rx="2" fill="#DDD6FE"></rect><rect x="107" y="185" width="121" height="4" rx="2" fill="#DDD6FE"></rect><rect x="107" y="219" width="121" height="4" rx="2" fill="#DDD6FE"></rect><rect x="107" y="86" width="121" height="4" rx="2" fill="#DDD6FE"></rect><rect x="107" y="94" width="121" height="4" rx="2" fill="#DDD6FE"></rect><rect x="107" y="102" width="129" height="4" rx="2" fill="#DDD6FE"></rect><rect x="107" y="118" width="57" height="6" rx="3" fill="#A78BFA"></rect><rect x="107" y="201" width="57" height="6" rx="3" fill="#A78BFA"></rect><rect x="48" y="53" width="21" height="4" rx="2" fill="#C4B5FD"></rect><rect x="48" y="63" width="18" height="4" rx="2" fill="#C4B5FD"></rect><rect x="48" y="73" width="13" height="4" rx="2" fill="#C4B5FD"></rect><rect x="48" y="83" width="19" height="4" rx="2" fill="#C4B5FD"></rect><rect x="48" y="93" width="23" height="4" rx="2" fill="#C4B5FD"></rect><rect x="37" y="112" width="23" height="3" rx="1.5" fill="#A78BFA"></rect><rect x="37" y="180" width="23" height="3" rx="1.5" fill="#A78BFA"></rect><rect x="37" y="120" width="18" height="4" rx="2" fill="#DDD6FE"></rect><rect x="37" y="188" width="18" height="4" rx="2" fill="#DDD6FE"></rect><rect x="37" y="128" width="18" height="4" rx="2" fill="#DDD6FE"></rect><rect x="37" y="196" width="18" height="4" rx="2" fill="#DDD6FE"></rect><rect x="37" y="136" width="21" height="4" rx="2" fill="#DDD6FE"></rect><rect x="37" y="204" width="21" height="4" rx="2" fill="#DDD6FE"></rect><rect x="37" y="144" width="21" height="4" rx="2" fill="#DDD6FE"></rect><rect x="37" y="212" width="21" height="4" rx="2" fill="#DDD6FE"></rect><rect x="37" y="152" width="30" height="4" rx="2" fill="#DDD6FE"></rect><rect x="37" y="220" width="30" height="4" rx="2" fill="#DDD6FE"></rect><rect x="37" y="160" width="30" height="4" rx="2" fill="#DDD6FE"></rect><rect x="37" y="168" width="24" height="4" rx="2" fill="#DDD6FE"></rect><circle cx="40" cy="45" r="3" fill="#A78BFA"></circle><circle cx="312" cy="13" r="3" fill="#DDD6FE"></circle><circle cx="40" cy="55" r="3" fill="#A78BFA"></circle><circle cx="40" cy="65" r="3" fill="#A78BFA"></circle><circle cx="40" cy="75" r="3" fill="#A78BFA"></circle><circle cx="40" cy="85" r="3" fill="#A78BFA"></circle><circle cx="40" cy="95" r="3" fill="#A78BFA"></circle><path d="M115 17.5l-2.379-2.379m0 0a3 3 0 10-4.242-4.243 3 3 0 004.242 4.243z" stroke="#C4B5FD"></path><rect x="107" y="147" width="132" height="23" rx="4" fill="#A78BFA"></rect></g><defs><filter id="guides_svg__filter0_dd" x="-15" y="-7" width="382" height="262" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="3"></feOffset><feGaussianBlur stdDeviation="3"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="8"></feOffset><feGaussianBlur stdDeviation="7.5"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix><feBlend in2="effect1_dropShadow" result="effect2_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape"></feBlend></filter></defs></svg></div></div><div class="absolute bottom-0 left-0 right-0 h-20 hidden sm:block" style="background:linear-gradient(to top, rgb(135, 94, 245), rgba(135, 94, 245, 0))"></div></div></section><section class="flex"><div class="w-full relative text-white overflow-hidden rounded-3xl flex shadow-lg"><div class="w-full flex md:flex-col bg-gradient-to-br from-pink-500 to-rose-500"><div class="sm:max-w-sm sm:flex-none md:w-auto md:flex-auto flex flex-col items-start relative z-10 p-6 xl:p-8"><h2 class="text-xl font-semibold mb-2 text-shadow">浏览器中尝试</h2><p class="font-medium text-rose-100 text-shadow mb-4">在 Playground 中使用 Tailwind 创作</p><a href="https://play.tailwindcss.com/" class="mt-auto bg-rose-900 bg-opacity-50 hover:bg-opacity-75 transition-colors duration-200 rounded-xl font-semibold py-2 px-4 inline-flex">开始创作</a></div><div class="docs_image__1HDuG relative md:pl-6 xl:pl-8 hidden sm:block"><svg width="352" height="232" fill="none" class="absolute top-6 left-6 md:static overflow-visible"><g opacity="0.8"><g filter="url(#play_svg__filter0_dd)"><rect width="352" height="232" rx="12" fill="#fff"></rect></g><rect x="307.5" y="10.5" width="8" height="6" rx="0.5" stroke="#FDA4AF"></rect><path d="M265 11a1 1 0 011-1h4v7h-4a1 1 0 01-1-1v-5z" fill="#FECDD3"></path><rect x="265.5" y="10.5" width="8" height="6" rx="0.5" stroke="#FDA4AF"></rect><path fill="#FDA4AF" d="M269 10h1v7h-1z"></path><path d="M286 11a1 1 0 011-1h7a1 1 0 011 1v3h-9v-3z" fill="#FECDD3"></path><rect x="286.5" y="10.5" width="8" height="6" rx="0.5" stroke="#FDA4AF"></rect><path fill="#FDA4AF" d="M286 13h9v1h-9z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M335 10h-5v1h1a1 1 0 011 1v4h3v-6zm-4 6v-4h-3v4h3zm-2-5h-1a1 1 0 00-1 1v4a1 1 0 001 1h7a1 1 0 001-1v-6a1 1 0 00-1-1h-5a1 1 0 00-1 1v1z" fill="#FDA4AF"></path><circle cx="10" cy="54" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="62" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="70" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="78" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="86" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="94" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="102" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="110" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="118" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="126" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="134" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="142" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="150" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="158" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="166" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="174" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="182" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="190" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="198" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="206" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="214" r="2" fill="#FDA4AF"></circle><circle cx="10" cy="222" r="2" fill="#FDA4AF"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M17 8c-2.4 0-3.9 1.212-4.5 3.637.9-1.213 1.95-1.667 3.15-1.364.685.173 1.174.675 1.716 1.23.882.905 1.903 1.952 4.134 1.952 2.4 0 3.9-1.212 4.5-3.637-.9 1.213-1.95 1.667-3.15 1.364-.685-.173-1.174-.675-1.716-1.23C20.252 9.047 19.231 8 17 8zm-4.5 5.456c-2.4 0-3.9 1.212-4.5 3.636.9-1.212 1.95-1.666 3.15-1.363.685.173 1.174.674 1.716 1.23.882.905 1.903 1.952 4.134 1.952 2.4 0 3.9-1.212 4.5-3.637-.9 1.212-1.95 1.667-3.15 1.364-.685-.173-1.174-.675-1.716-1.23-.882-.905-1.903-1.952-4.134-1.952z" fill="#FB7185"></path><path d="M177 29h175v191c0 6.627-5.373 12-12 12H177V29z" fill="#FFF1F2"></path><path fill="#FECDD3" d="M0 27h352v2H0zm0 16h176v1H0z"></path><path fill="#FECDD3" d="M175 29h2v203h-2z"></path><rect x="20" y="52" width="31" height="4" rx="2" fill="#FB7185"></rect><rect x="8" y="34" width="15" height="4" rx="2" fill="#FB7185"></rect><rect x="27" y="34" width="15" height="4" rx="2" fill="#FECDD3"></rect><rect x="46" y="34" width="15" height="4" rx="2" fill="#FECDD3"></rect><rect x="28" y="60" width="87" height="4" rx="2" fill="#FB7185"></rect><rect x="36" y="68" width="95" height="4" rx="2" fill="#FB7185"></rect><rect x="36" y="76" width="87" height="4" rx="2" fill="#FB7185"></rect><rect x="36" y="84" width="15" height="4" rx="2" fill="#FB7185"></rect><rect x="28" y="92" width="15" height="4" rx="2" fill="#FB7185"></rect><rect x="20" y="100" width="15" height="4" rx="2" fill="#FB7185"></rect><rect x="20" y="108" width="39" height="4" rx="2" fill="#FB7185"></rect><rect x="28" y="116" width="63" height="4" rx="2" fill="#FB7185"></rect><rect x="36" y="124" width="87" height="4" rx="2" fill="#FB7185"></rect><rect x="36" y="164" width="15" height="4" rx="2" fill="#FB7185"></rect><rect x="36" y="172" width="15" height="4" rx="2" fill="#FB7185"></rect><path d="M44 134a2 2 0 012-2h129v4H46a2 2 0 01-2-2zm8 8a2 2 0 012-2h121v4H54a2 2 0 01-2-2zm0 8a2 2 0 012-2h121v4H54a2 2 0 01-2-2zm-8 8a2 2 0 012-2h59a2 2 0 110 4H46a2 2 0 01-2-2zm0 24a2 2 0 012-2h19a2 2 0 110 4H46a2 2 0 01-2-2zm8 8a2 2 0 012-2h51a2 2 0 110 4H54a2 2 0 01-2-2zm0 24a2 2 0 012-2h51a2 2 0 110 4H54a2 2 0 01-2-2zm-8 8a2 2 0 012-2h35a2 2 0 110 4H46a2 2 0 01-2-2zm16-24a2 2 0 012-2h113v4H62a2 2 0 01-2-2zm0 8a2 2 0 012-2h113v4H62a2 2 0 01-2-2z" fill="#FB7185"></path><rect x="232" y="99" width="64" height="64" rx="8" fill="#fff"></rect><rect x="240" y="115" width="48" height="4" rx="2" fill="#FB7185"></rect><rect x="244" y="123" width="40" height="4" rx="2" fill="#FB7185"></rect><rect x="252" y="135" width="24" height="2" rx="1" fill="#FECDD3"></rect><rect x="240" y="145" width="48" height="10" rx="5" fill="#FB7185"></rect><circle cx="264" cy="99" r="8" fill="#FECDD3"></circle></g><defs><filter id="play_svg__filter0_dd" x="-15" y="-7" width="382" height="262" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="3"></feOffset><feGaussianBlur stdDeviation="3"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="8"></feOffset><feGaussianBlur stdDeviation="7.5"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix><feBlend in2="effect1_dropShadow" result="effect2_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape"></feBlend></filter></defs></svg></div></div><div class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-rose-500 hidden sm:block"></div></div></section><section class="flex"><div class="w-full relative text-white overflow-hidden rounded-3xl flex shadow-lg"><div class="w-full flex md:flex-col bg-gradient-to-br from-yellow-400 to-orange-500"><div class="sm:max-w-sm sm:flex-none md:w-auto md:flex-auto flex flex-col items-start relative z-10 p-6 xl:p-8"><h2 class="text-xl font-semibold mb-2 text-shadow">观看视频</h2><p class="font-medium text-amber-100 text-shadow mb-4">直接在 Youtube 频道中学习</p><a class="mt-auto bg-amber-900 bg-opacity-50 hover:bg-opacity-75 transition-colors duration-200 rounded-xl font-semibold py-2 px-4 inline-flex" href="https://www.youtube.com/tailwindlabs">开始观看</a></div><div class="docs_image__1HDuG relative hidden sm:block"><div class="absolute left-2 bottom-3 xl:bottom-5"><svg width="420" height="204" fill="none" class="overflow-visible"><g opacity="0.8"><g filter="url(#screencasts_svg__filter0_d)"><rect x="324" width="96" height="60" rx="9" fill="#FFFBEB"></rect></g><path d="M324 49.5h96V51a9 9 0 01-9 9h-78a9 9 0 01-9-9v-1.5z" fill="#FCD34D"></path><path d="M324 46.502h96v3h-96v-3z" fill="#FBBF24"></path><path d="M324 46.502h36.75v3H324v-3z" fill="#F59E0B"></path><circle cx="371.25" cy="23.25" r="11.25" fill="#FCD34D"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M369.042 18.927a1.5 1.5 0 011.54.075l4.5 3a1.5 1.5 0 010 2.496l-4.5 3a1.5 1.5 0 01-2.332-1.248v-6a1.5 1.5 0 01.792-1.323z" fill="#F59E0B"></path><g filter="url(#screencasts_svg__filter1_d)"><rect x="216" width="96" height="60" rx="9" fill="#FFFBEB"></rect></g><path d="M216 49.5h96V51a9 9 0 01-9 9h-78a9 9 0 01-9-9v-1.5z" fill="#FCD34D"></path><path d="M216 46.502h96v3h-96v-3z" fill="#FBBF24"></path><path d="M216 46.502h36.75v3H216v-3z" fill="#F59E0B"></path><circle cx="263.25" cy="23.25" r="11.25" fill="#FCD34D"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M261.042 18.927a1.5 1.5 0 011.54.075l4.5 3a1.5 1.5 0 010 2.496l-4.5 3a1.5 1.5 0 01-2.332-1.248v-6a1.5 1.5 0 01.792-1.323z" fill="#F59E0B"></path><g filter="url(#screencasts_svg__filter2_d)"><rect x="270" y="72" width="96" height="60" rx="9" fill="#FFFBEB"></rect></g><path d="M270 121.5h96v1.5a9 9 0 01-9 9h-78a9 9 0 01-9-9v-1.5z" fill="#FCD34D"></path><path d="M270 118.502h96v3h-96v-3z" fill="#FBBF24"></path><path d="M270 118.502h44.75v3H270v-3z" fill="#F59E0B"></path><circle cx="317.25" cy="95.25" r="11.25" fill="#FCD34D"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M315.042 90.927a1.5 1.5 0 011.54.075l4.5 3a1.5 1.5 0 010 2.496l-4.5 3a1.5 1.5 0 01-2.332-1.248v-6a1.5 1.5 0 01.792-1.323z" fill="#F59E0B"></path><rect x="216" y="143.998" width="96" height="60" rx="9" fill="#FFFBEB"></rect><path d="M216 193.5h96v1.5a9 9 0 01-9 9h-78a9 9 0 01-9-9v-1.5z" fill="#FCD34D"></path><path d="M216 190.5h96v3h-96v-3z" fill="#FBBF24"></path><path d="M216 190.5h36.75v3H216v-3z" fill="#F59E0B"></path><circle cx="263.254" cy="167.25" r="11.25" fill="#FCD34D"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M261.046 162.927a1.5 1.5 0 011.54.075l4.5 3a1.5 1.5 0 010 2.496l-4.5 3a1.5 1.5 0 01-2.332-1.248v-6c0-.553.304-1.061.792-1.323z" fill="#F59E0B"></path><g filter="url(#screencasts_svg__filter3_d)"><rect x="162" y="72.002" width="96" height="60" rx="9" fill="#FFFBEB"></rect></g><path d="M162 121.502h96v1.5a9 9 0 01-9 9h-78a9 9 0 01-9-9v-1.5z" fill="#FCD34D"></path><path d="M162 118.502h96v3h-96v-3z" fill="#FBBF24"></path><path d="M162 118.502h20.75v3H162v-3z" fill="#F59E0B"></path><circle cx="209.254" cy="95.252" r="11.25" fill="#FCD34D"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M207.046 90.93a1.5 1.5 0 011.54.074l4.5 3a1.5 1.5 0 010 2.496l-4.5 3a1.5 1.5 0 01-2.332-1.248v-6a1.5 1.5 0 01.792-1.323z" fill="#F59E0B"></path><g filter="url(#screencasts_svg__filter4_d)"><rect x="54" y="72.002" width="96" height="60" rx="9" fill="#FFFBEB"></rect></g><path d="M54 121.502h96v1.5a9 9 0 01-9 9H63a9 9 0 01-9-9v-1.5z" fill="#FCD34D"></path><path d="M54 118.502h96v3H54v-3z" fill="#FBBF24"></path><path d="M54 118.502h52.75v3H54v-3z" fill="#F59E0B"></path><circle cx="101.25" cy="95.252" r="11.25" fill="#FCD34D"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M99.042 90.93a1.5 1.5 0 011.54.074l4.5 3a1.5 1.5 0 010 2.496l-4.5 3a1.5 1.5 0 01-2.332-1.248v-6a1.5 1.5 0 01.792-1.323z" fill="#F59E0B"></path><rect x="108" y="144.002" width="96" height="60" rx="9" fill="#FFFBEB"></rect><path d="M108 193.5h96v1.5a9 9 0 01-9 9h-78a9 9 0 01-9-9v-1.5z" fill="#FCD34D"></path><path d="M108 190.502h96v3h-96v-3z" fill="#FBBF24"></path><path d="M108 190.502h36.75v3H108v-3z" fill="#F59E0B"></path><circle cx="155.25" cy="167.252" r="11.25" fill="#FCD34D"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M153.046 162.927a1.5 1.5 0 011.54.075l4.5 3a1.5 1.5 0 010 2.496l-4.5 3a1.5 1.5 0 01-2.332-1.248v-6c0-.553.304-1.061.792-1.323z" fill="#F59E0B"></path><rect y="144.002" width="96" height="60" rx="9" fill="#FFFBEB"></rect><path d="M0 193.502h96v1.5a9 9 0 01-9 9H9a9 9 0 01-9-9v-1.5z" fill="#FCD34D"></path><path d="M0 190.502h96v3H0v-3z" fill="#FBBF24"></path><path d="M0 190.502h36.75v3H0v-3z" fill="#F59E0B"></path><circle cx="47.25" cy="167.252" r="11.25" fill="#FCD34D"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M45.042 162.929a1.5 1.5 0 011.54.075l4.5 3a1.499 1.499 0 010 2.496l-4.5 3a1.5 1.5 0 01-2.332-1.248v-6a1.5 1.5 0 01.792-1.323z" fill="#F59E0B"></path></g><defs><filter id="screencasts_svg__filter0_d" x="319.5" y="-2.25" width="105" height="69" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="2.25"></feOffset><feGaussianBlur stdDeviation="2.25"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend></filter><filter id="screencasts_svg__filter1_d" x="211.5" y="-2.25" width="105" height="69" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="2.25"></feOffset><feGaussianBlur stdDeviation="2.25"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend></filter><filter id="screencasts_svg__filter2_d" x="265.5" y="69.75" width="105" height="69" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="2.25"></feOffset><feGaussianBlur stdDeviation="2.25"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend></filter><filter id="screencasts_svg__filter3_d" x="157.5" y="69.752" width="105" height="69" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="2.25"></feOffset><feGaussianBlur stdDeviation="2.25"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend></filter><filter id="screencasts_svg__filter4_d" x="49.5" y="69.752" width="105" height="69" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="2.25"></feOffset><feGaussianBlur stdDeviation="2.25"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend></filter></defs></svg></div></div></div><div class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-orange-500 hidden sm:block"></div></div></section><section class="md:col-span-3 flex flex-wrap md:flex-nowrap items-center bg-gray-800 shadow-lg rounded-2xl py-6 md:py-4 px-6 md:pr-5 space-y-4 md:space-y-0 md:space-x-8"><h2 class="flex-none"><span class="sr-only">Tailwind UI</span><svg width="188" height="28" fill="none" viewBox="0 0 188 28" class="w-40 h-auto"><path fill="#16BDCA" d="M22 2c-5.333 0-8.667 2.667-10 8 2-2.667 4.333-3.667 7-3 1.522.38 2.609 1.484 3.813 2.706C24.773 11.696 27.043 14 32 14c5.333 0 8.667-2.667 10-8-2 2.667-4.333 3.667-7 3-1.521-.38-2.609-1.484-3.813-2.706C29.227 4.304 26.957 2 22 2zM12 14c-5.333 0-8.667 2.667-10 8 2-2.667 4.333-3.667 7-3 1.521.38 2.609 1.484 3.813 2.706C14.773 23.696 17.043 26 22 26c5.333 0 8.667-2.667 10-8-2 2.667-4.333 3.667-7 3-1.521-.38-2.609-1.484-3.813-2.706C19.227 16.304 16.957 14 12 14z"></path><path fill="#FFF" d="M60.26 11.12V8h-3.72V3.8l-3.24.96V8h-2.76v3.12h2.76v7.2c0 3.9 1.98 5.28 6.96 4.68v-2.91c-2.46.12-3.72.15-3.72-1.77v-7.2h3.72zM74.463 8v2.13c-1.14-1.56-2.91-2.52-5.25-2.52-4.08 0-7.47 3.42-7.47 7.89 0 4.44 3.39 7.89 7.47 7.89 2.34 0 4.11-.96 5.25-2.55V23h3.24V8h-3.24zm-4.74 12.3c-2.7 0-4.74-2.01-4.74-4.8s2.04-4.8 4.74-4.8 4.74 2.01 4.74 4.8-2.04 4.8-4.74 4.8zM83.1 5.75c1.14 0 2.07-.96 2.07-2.07 0-1.14-.93-2.07-2.07-2.07-1.14 0-2.07.93-2.07 2.07 0 1.11.93 2.07 2.07 2.07zM81.48 23h3.24V8h-3.24v15zm7.002 0h3.24V1.1h-3.24V23zm24.282-15l-2.94 10.35L106.704 8h-3.09l-3.15 10.35L97.554 8h-3.42l4.71 15h3.18l3.15-10.11 3.12 10.11h3.18l4.71-15h-3.42zm7.426-2.25c1.14 0 2.07-.96 2.07-2.07 0-1.14-.93-2.07-2.07-2.07-1.14 0-2.07.93-2.07 2.07 0 1.11.93 2.07 2.07 2.07zM118.57 23h3.24V8h-3.24v15zm14.892-15.39c-2.04 0-3.66.75-4.65 2.31V8h-3.24v15h3.24v-8.04c0-3.06 1.68-4.32 3.81-4.32 2.04 0 3.36 1.2 3.36 3.48V23h3.24v-9.21c0-3.9-2.4-6.18-5.76-6.18zM154.59 2v8.13c-1.14-1.56-2.91-2.52-5.25-2.52-4.08 0-7.47 3.42-7.47 7.89 0 4.44 3.39 7.89 7.47 7.89 2.34 0 4.11-.96 5.25-2.55V23h3.24V2h-3.24zm-4.74 18.3c-2.7 0-4.74-2.01-4.74-4.8s2.04-4.8 4.74-4.8 4.74 2.01 4.74 4.8-2.04 4.8-4.74 4.8z"></path><path fill="#FFF" fill-rule="evenodd" d="M171 4h10a4 4 0 014 4v10a4 4 0 01-4 4h-10a4 4 0 01-4-4V8a4 4 0 014-4zm-6 4a6 6 0 016-6h10a6 6 0 016 6v10a6 6 0 01-6 6h-10a6 6 0 01-6-6V8zm12.816 7.293c0 2.114-1.596 3.402-3.752 3.402-2.142 0-3.738-1.288-3.738-3.402V8.7h1.918v6.44c0 .952.504 1.666 1.82 1.666s1.82-.714 1.82-1.666V8.7h1.932v6.594zm2.021 3.206V8.7h1.932v9.8h-1.932z" clip-rule="evenodd"></path></svg></h2><p class="flex-auto text-white text-lg font-medium">由 Tailwind CSS 的创造者们用心打造的精美 UI 组件库</p><a href="https://tailwindui.com/components" class="flex-none bg-white hover:bg-gray-100 transition-colors duration-200 text-gray-900 font-semibold rounded-lg py-3 px-4">浏览组件</a></section></div><section><h2 class="text-3xl tracking-tight font-extrabold text-gray-900 mt-16 mb-8">Tailwind 的新变化</h2><ul class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 xl:gap-8 font-semibold text-gray-900 text-center"><li class="flex"><a class="relative rounded-xl ring-1 ring-black ring-opacity-5 shadow-sm w-full pt-8 pb-6 px-6" href="/docs/ring-width"><svg width="144" height="48" viewBox="0 0 144 48" fill="none" class="h-auto max-w-full mx-auto mb-3"><path fill="#fff" d="M0 0h144v48H0z"></path><path d="M46 11a4 4 0 00-4 4v12a4 4 0 004 4h26.638l-2.412-5.858a3 3 0 013.916-3.916l17 7A3 3 0 0193 31h5a4 4 0 004-4V15a4 4 0 00-4-4H46z" fill="#A5F3FC"></path><path d="M72.293 23.293a1 1 0 011.088-.218l17 7a1 1 0 01.013 1.844l-4.653 1.994 5.673 5.673a1 1 0 010 1.414L90 42.414a1 1 0 01-1.414 0l-5.673-5.672-1.994 4.652a1 1 0 01-1.844-.013l-7-17a1 1 0 01.218-1.088z" fill="#22D3EE"></path><path d="M38 15a8 8 0 018-8h52a8 8 0 018 8v12a8 8 0 01-8 8h-8.343l-.412-.412 1.937-.83A2.994 2.994 0 0092.236 33H98a6 6 0 006-6V15a6 6 0 00-6-6H46a6 6 0 00-6 6v12a6 6 0 006 6h27.462l.823 2H46a8 8 0 01-8-8V15z" fill="#22D3EE"></path></svg>Focus 轮廓环功能类<span class="absolute top-2 right-2 bg-fuchsia-100 text-fuchsia-600 rounded-full text-xs py-0.5 px-2">2.0+</span></a></li><li class="flex"><a class="relative rounded-xl ring-1 ring-black ring-opacity-5 shadow-sm w-full pt-8 pb-6 px-6" href="/docs/dark-mode"><svg width="144" height="48" viewBox="0 0 144 48" fill="none" class="h-auto max-w-full mx-auto mb-3"><path fill="#fff" d="M0 0h144v48H0z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M62 12c-6.627 0-12 5.373-12 12s5.373 12 12 12h20c6.627 0 12-5.373 12-12s-5.373-12-12-12H62zm20 22c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z" fill="#A5F3FC"></path><path fill="#fff" d="M18 12h24v24H18z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M30 14a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zm-7.071 2.929a1 1 0 011.414 0l.707.707a1 1 0 01-1.414 1.414l-.707-.707a1 1 0 010-1.414zm14.142 0a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zM25 24a5 5 0 1110 0 5 5 0 01-10 0zm-5 0a1 1 0 011-1h1a1 1 0 110 2h-1a1 1 0 01-1-1zm17 0a1 1 0 011-1h1a1 1 0 110 2h-1a1 1 0 01-1-1zm-2.05 4.95a1 1 0 011.414 0l.707.707a1 1 0 01-1.414 1.414l-.707-.707a1 1 0 010-1.414zm-11.314 0a1 1 0 011.414 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707zM30 31a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1z" fill="#22D3EE"></path><path fill="#fff" d="M102 12h24v24h-24z"></path><path d="M111.353 14.94c.283.283.37.708.221 1.08a8 8 0 0010.407 10.408 1 1 0 011.301 1.3A10.003 10.003 0 01114 34c-5.523 0-10-4.477-10-10 0-4.207 2.598-7.805 6.273-9.282a1 1 0 011.08.22z" fill="#22D3EE"></path></svg>深色模式<span class="absolute top-2 right-2 bg-fuchsia-100 text-fuchsia-600 rounded-full text-xs py-0.5 px-2">2.0+</span></a></li><li class="flex"><a class="relative rounded-xl ring-1 ring-black ring-opacity-5 shadow-sm w-full pt-8 pb-6 px-6" href="/docs/customizing-colors#color-palette-reference"><svg width="144" height="48" viewBox="0 0 144 48" fill="none" class="h-auto max-w-full mx-auto mb-3"><path fill="#fff" d="M0 0h144v48H0z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M63.559 48H92a4 4 0 004-4V34a4 4 0 00-4-4H81.559l-18 18zM67.898 40.498l19.943-19.942a4 4 0 000-5.657l-7.072-7.071a4 4 0 00-5.656 0L68 14.94v24.058c0 .509-.035 1.009-.102 1.499z" fill="#A5F3FC"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M52 0a4 4 0 00-4 4v35a9 9 0 1018 0V4a4 4 0 00-4-4H52zm5 42a3 3 0 100-6 3 3 0 000 6z" fill="#22D3EE"></path></svg>可扩展调色板<span class="absolute top-2 right-2 bg-fuchsia-100 text-fuchsia-600 rounded-full text-xs py-0.5 px-2">2.0+</span></a></li><li class="flex"><a class="relative rounded-xl ring-1 ring-black ring-opacity-5 shadow-sm w-full pt-8 pb-6 px-6" href="/docs/configuring-variants#enabling-extra-variants"><svg width="144" height="48" viewBox="0 0 144 48" fill="none" class="h-auto max-w-full mx-auto mb-3"><path fill="#fff" d="M0 0h144v48H0z"></path><path d="M71.293 26.293a1 1 0 011.088-.218l17 7a1 1 0 01.013 1.844l-4.653 1.994 5.673 5.673a1 1 0 010 1.414L89 45.414a1 1 0 01-1.414 0l-5.673-5.672-1.994 4.652a1 1 0 01-1.844-.013l-7-17a1 1 0 01.218-1.088z" fill="#22D3EE"></path><path d="M46 16a4 4 0 00-4 4v12a4 4 0 004 4h26.462l-3.236-7.858a3 3 0 013.916-3.916l17 7A3 3 0 0191.236 36H98a4 4 0 004-4V20a4 4 0 00-4-4H46z" fill="#22D3EE"></path><path d="M54 8a4 4 0 00-4 4v2h44v-2a4 4 0 00-4-4H54zM62 2a4 4 0 00-4 4h28a4 4 0 00-4-4H62z" fill="#A5F3FC"></path></svg>可扩展变量<span class="absolute top-2 right-2 bg-fuchsia-100 text-fuchsia-600 rounded-full text-xs py-0.5 px-2">2.0+</span></a></li><li class="flex"><a class="relative rounded-xl ring-1 ring-black ring-opacity-5 shadow-sm w-full pt-8 pb-6 px-6" href="/docs/breakpoints"><svg width="144" height="48" viewBox="0 0 144 48" fill="none" class="h-auto max-w-full mx-auto mb-3"><path fill="#fff" d="M0 0h144v48H0z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M108 24a1 1 0 011-1h15.586l-2.293-2.293a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 11-1.414-1.414L124.586 25H109a1 1 0 01-1-1z" fill="url(#breakpoint_svg__paint0_linear)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M36 24a1 1 0 01-1 1H19.414l2.293 2.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L19.414 23H35a1 1 0 011 1z" fill="url(#breakpoint_svg__paint1_linear)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M48 0a4 4 0 00-4 4v40a4 4 0 004 4h48a4 4 0 004-4V4a4 4 0 00-4-4H48zm1 7a2 2 0 100-4 2 2 0 000 4zm8-2a2 2 0 11-4 0 2 2 0 014 0zm4 2a2 2 0 100-4 2 2 0 000 4z" fill="#A5F3FC"></path><defs><linearGradient id="breakpoint_svg__paint0_linear" x1="105" y1="24" x2="127" y2="24" gradientUnits="userSpaceOnUse"><stop stop-color="#A5F3FC"></stop><stop offset="1" stop-color="#22D3EE"></stop></linearGradient><linearGradient id="breakpoint_svg__paint1_linear" x1="39" y1="24" x2="17" y2="24" gradientUnits="userSpaceOnUse"><stop stop-color="#A5F3FC"></stop><stop offset="1" stop-color="#22D3EE"></stop></linearGradient></defs></svg>更多的宽度断点检查<span class="absolute top-2 right-2 bg-fuchsia-100 text-fuchsia-600 rounded-full text-xs py-0.5 px-2">2.0+</span></a></li><li class="flex"><a class="relative rounded-xl ring-1 ring-black ring-opacity-5 shadow-sm w-full pt-8 pb-6 px-6" href="/docs/presets"><svg width="144" height="48" viewBox="0 0 144 48" fill="none" class="h-auto max-w-full mx-auto mb-3"><path fill="#fff" d="M0 0h144v48H0z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M56 0a8 8 0 00-8 8v32a8 8 0 008 8h32a8 8 0 008-8V8a8 8 0 00-8-8H56zm10 8a2 2 0 00-2 2v4a2 2 0 002 2h2a2 2 0 002-2v-4a2 2 0 00-2-2h-2zm8 14a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2v-4zm-8 10a2 2 0 00-2 2v4a2 2 0 002 2h2a2 2 0 002-2v-4a2 2 0 00-2-2h-2z" fill="#A5F3FC"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M56 12a2 2 0 012-2h4a1 1 0 011 1v2a1 1 0 01-1 1h-4a2 2 0 01-2-2zm2 10a2 2 0 100 4h14a1 1 0 001-1v-2a1 1 0 00-1-1H58zm0 12a2 2 0 100 4h4a1 1 0 001-1v-2a1 1 0 00-1-1h-4zm14 0a1 1 0 00-1 1v2a1 1 0 001 1h14a2 2 0 100-4H72zm-1-23a1 1 0 011-1h14a2 2 0 110 4H72a1 1 0 01-1-1v-2zm11 11a1 1 0 00-1 1v2a1 1 0 001 1h4a2 2 0 100-4h-4z" fill="#22D3EE"></path></svg>可共享的 Presets </a></li><li class="flex"><a class="relative rounded-xl ring-1 ring-black ring-opacity-5 shadow-sm w-full pt-8 pb-6 px-6" href="/docs/gradient-color-stops"><svg width="144" height="48" viewBox="0 0 144 48" fill="none" class="h-auto max-w-full mx-auto mb-3"><path fill="#fff" d="M0 0h144v48H0z"></path><rect x="8" y="24" width="128" height="20" rx="4" fill="url(#gradients_svg__paint0_linear)"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M2 4a2 2 0 00-2 2v12a2 2 0 002 2h4l2 2 2-2h4a2 2 0 002-2V6a2 2 0 00-2-2H2zm12 2H2v12h12V6zM130 4a2 2 0 00-2 2v12a2 2 0 002 2h4l2 2 2-2h4a2 2 0 002-2V6a2 2 0 00-2-2h-12zm12 2h-12v12h12V6z" fill="#22D3EE"></path><path fill="#A5F3FC" d="M4 8h8v8H4z"></path><path fill="#22D3EE" d="M132 8h8v8h-8z"></path><defs><linearGradient id="gradients_svg__paint0_linear" x1="136" y1="34.476" x2="8" y2="34.476" gradientUnits="userSpaceOnUse"><stop stop-color="#22D3EE"></stop><stop offset="1" stop-color="#A5F3FC"></stop></linearGradient></defs></svg>渐变</a></li><li class="flex"><a class="relative rounded-xl ring-1 ring-black ring-opacity-5 shadow-sm w-full pt-8 pb-6 px-6" href="/docs/animation"><svg width="144" height="48" viewBox="0 0 144 48" fill="none" class="h-auto max-w-full mx-auto mb-3"><path fill="#fff" d="M0 0h144v48H0z"></path><rect x="26" y="13" width="24" height="24" rx="4" fill="#A5F3FC"></rect><path d="M57 25h22m0 0l-4-4m4 4l-4 4" stroke="url(#animations_svg__paint0_linear)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M86.036 17.975a4 4 0 012.828-4.9l18.81-5.04a4 4 0 014.899 2.83l5.04 18.809a4 4 0 01-2.829 4.899l-18.81 5.04a4 4 0 01-4.898-2.829l-5.04-18.81z" fill="#22D3EE"></path><defs><linearGradient id="animations_svg__paint0_linear" x1="57" y1="25" x2="79" y2="25" gradientUnits="userSpaceOnUse"><stop stop-color="#A5F3FC"></stop><stop offset="1" stop-color="#22D3EE"></stop></linearGradient></defs></svg>动画</a></li></ul></section><section><header class="flex items-center justify-between mt-16 mb-8"><h2 class="text-3xl tracking-tight font-extrabold text-gray-900">最近的更新</h2><a href="https://blog.tailwindcss.com" class="font-medium text-gray-900">查看所有最近的更新</a></header><ul class="bg-gray-50 rounded-3xl p-2 sm:p-5 xl:p-6"><li><article><a href="https://blog.tailwindcss.com/tailwindcss-v2" class="grid md:grid-cols-8 xl:grid-cols-9 items-start relative rounded-xl p-3 sm:p-5 xl:p-6 overflow-hidden hover:bg-white"><h3 class="font-semibold text-gray-900 md:col-start-3 md:col-span-6 xl:col-start-3 xl:col-span-7 mb-1 ml-9 md:ml-0">Tailwind CSS v2.0</h3><time dateTime="2020-11-18T17:45:00.000Z" class="md:col-start-1 md:col-span-2 row-start-1 md:row-end-3 flex items-center font-medium mb-1 md:mb-0"><svg viewBox="0 0 12 12" class="w-3 h-3 mr-6 overflow-visible text-cyan-400"><circle cx="6" cy="6" r="6" fill="currentColor"></circle><circle cx="6" cy="6" r="11" fill="none" stroke="currentColor" stroke-width="2"></circle><path d="M 6 18 V 500" fill="none" stroke-width="2" stroke="currentColor" class="text-gray-200"></path></svg>Nov 19, 2020</time><p class="md:col-start-3 md:col-span-6 xl:col-span-7 ml-9 md:ml-0">今天我们终于发布了 Tailwind CSS v2.0，包含一个全新的调色板，深色模式支持等等很多更新！</p></a></article></li><li><article><a href="https://blog.tailwindcss.com/tailwindcss-1-9" class="grid md:grid-cols-8 xl:grid-cols-9 items-start relative rounded-xl p-3 sm:p-5 xl:p-6 overflow-hidden hover:bg-white"><h3 class="font-semibold text-gray-900 md:col-start-3 md:col-span-6 xl:col-start-3 xl:col-span-7 mb-1 ml-9 md:ml-0">Tailwind CSS v1.9.0</h3><time dateTime="2020-10-13T18:30:00.000Z" class="md:col-start-1 md:col-span-2 row-start-1 md:row-end-3 flex items-center font-medium mb-1 md:mb-0"><svg viewBox="0 0 12 12" class="w-3 h-3 mr-6 overflow-visible text-gray-300"><circle cx="6" cy="6" r="6" fill="currentColor"></circle><path d="M 6 -6 V -30" fill="none" stroke-width="2" stroke="currentColor" class="text-gray-200"></path><path d="M 6 18 V 500" fill="none" stroke-width="2" stroke="currentColor" class="text-gray-200"></path></svg>Oct 14, 2020</time><p class="md:col-start-3 md:col-span-6 xl:col-span-7 ml-9 md:ml-0">我们发布了 Tailwind CSS v1.9：增加presets配置项，新的 CSS 网格类，可扩展边框圆角，旋转，倾斜拉伸以及有用的可访问性改进等等！</p></a></article></li><li><article><a href="https://blog.tailwindcss.com/introducing-tailwind-play" class="grid md:grid-cols-8 xl:grid-cols-9 items-start relative rounded-xl p-3 sm:p-5 xl:p-6 overflow-hidden hover:bg-white"><h3 class="font-semibold text-gray-900 md:col-start-3 md:col-span-6 xl:col-start-3 xl:col-span-7 mb-1 ml-9 md:ml-0">介绍 Tailwind Play </h3><time dateTime="2020-10-07T13:00:00.000Z" class="md:col-start-1 md:col-span-2 row-start-1 md:row-end-3 flex items-center font-medium mb-1 md:mb-0"><svg viewBox="0 0 12 12" class="w-3 h-3 mr-6 overflow-visible text-gray-300"><circle cx="6" cy="6" r="6" fill="currentColor"></circle><path d="M 6 -6 V -30" fill="none" stroke-width="2" stroke="currentColor" class="text-gray-200"></path><path d="M 6 18 V 500" fill="none" stroke-width="2" stroke="currentColor" class="text-gray-200"></path></svg>Oct 7, 2020</time><p class="md:col-start-3 md:col-span-6 xl:col-span-7 ml-9 md:ml-0">今天我们很高兴发布第一个版本的 Tailwind Play，一个高级的在线 Tailwind CSS Playground，可直接在浏览器中使用 Tailwind 的所有功能。</p></a></article></li><li><article><a href="https://blog.tailwindcss.com/headless-ui-unstyled-accessible-ui-components" class="grid md:grid-cols-8 xl:grid-cols-9 items-start relative rounded-xl p-3 sm:p-5 xl:p-6 overflow-hidden hover:bg-white"><h3 class="font-semibold text-gray-900 md:col-start-3 md:col-span-6 xl:col-start-3 xl:col-span-7 mb-1 ml-9 md:ml-0">无头 UI：无样式，可访问的 UI 组件</h3><time dateTime="2020-10-06T18:30:00.000Z" class="md:col-start-1 md:col-span-2 row-start-1 md:row-end-3 flex items-center font-medium mb-1 md:mb-0"><svg viewBox="0 0 12 12" class="w-3 h-3 mr-6 overflow-visible text-gray-300"><circle cx="6" cy="6" r="6" fill="currentColor"></circle><path d="M 6 -6 V -30" fill="none" stroke-width="2" stroke="currentColor" class="text-gray-200"></path></svg>Oct 7, 2020</time><p class="md:col-start-3 md:col-span-6 xl:col-span-7 ml-9 md:ml-0">无头 UI 是一组针对 React，Vue 和 Alpine.js 的完全无样式，完全可访问的 UI 组件，可轻松构建完全可访问的自定义 UI 组件，而不会牺牲使用简单实用的类从头开始对其进行样式设置的能力。</p></a></article></li></ul></section><section><h2 class="text-3xl tracking-tight font-extrabold text-gray-900 mt-16 mb-8">参与社区</h2><ul class="grid sm:grid-cols-2 gap-6 xl:gap-8"><li><a href="https://github.com/tailwindlabs/tailwindcss/discussions" class="flex items-start space-x-4"><svg fill="currentColor" class="flex-none text-gray-900 w-12 h-12"><rect width="48" height="48" rx="12"></rect><path d="M23.997 12a12 12 0 00-3.792 23.388c.6.12.816-.264.816-.576l-.012-2.04c-3.336.72-4.044-1.608-4.044-1.608-.552-1.392-1.332-1.764-1.332-1.764-1.08-.744.084-.72.084-.72 1.2.084 1.836 1.236 1.836 1.236 1.08 1.824 2.808 1.296 3.492.996.12-.78.42-1.308.756-1.608-2.664-.3-5.46-1.332-5.46-5.928 0-1.32.468-2.388 1.236-3.228a4.32 4.32 0 01.12-3.168s1.008-.324 3.3 1.224a11.496 11.496 0 016 0c2.292-1.56 3.3-1.224 3.3-1.224.66 1.644.24 2.88.12 3.168.768.84 1.236 1.92 1.236 3.228 0 4.608-2.808 5.616-5.484 5.916.432.372.816 1.104.816 2.22l-.012 3.3c0 .312.216.696.828.576A12 12 0 0023.997 12z" fill="currentColor" class="text-gray-50"></path></svg><div class="flex-auto"><h3 class="font-bold text-gray-900">GitHub Discussions</h3><p>联系 Tailwind CSS 社区的成员。</p></div></a></li><li><a href="/discord" class="flex items-start space-x-4"><svg fill="currentColor" class="flex-none text-indigo-400 w-12 h-12"><rect width="48" height="48" rx="12"></rect><path d="M21.637 23.57c-.745 0-1.332.653-1.332 1.45 0 .797.6 1.45 1.332 1.45.744 0 1.332-.653 1.332-1.45.013-.797-.588-1.45-1.332-1.45zm4.767 0c-.744 0-1.332.653-1.332 1.45 0 .797.6 1.45 1.332 1.45.745 0 1.332-.653 1.332-1.45 0-.797-.587-1.45-1.332-1.45z" fill="currentColor" class="text-indigo-50"></path><path d="M32.75 12.613H15.248a2.684 2.684 0 00-2.678 2.69v17.66a2.684 2.684 0 002.678 2.69h14.811l-.692-2.416 1.672 1.554 1.58 1.463 2.809 2.482V15.304a2.684 2.684 0 00-2.678-2.69zm-5.042 17.058s-.47-.561-.862-1.058c1.711-.483 2.364-1.554 2.364-1.554-.535.353-1.045.6-1.502.77a8.591 8.591 0 01-1.894.562 9.151 9.151 0 01-3.383-.013 10.964 10.964 0 01-1.92-.561 7.652 7.652 0 01-.953-.445c-.04-.026-.078-.039-.117-.065-.027-.013-.04-.026-.053-.039-.235-.13-.365-.222-.365-.222s.627 1.045 2.285 1.541c-.392.497-.875 1.084-.875 1.084-2.886-.091-3.983-1.985-3.983-1.985 0-4.206 1.88-7.615 1.88-7.615C20.211 18.661 22 18.7 22 18.7l.131.157c-2.35.679-3.435 1.71-3.435 1.71s.287-.156.77-.378c1.398-.614 2.508-.784 2.965-.823.079-.013.144-.026.223-.026a10.647 10.647 0 016.57 1.228s-1.033-.98-3.253-1.66l.183-.208s1.79-.04 3.67 1.371c0 0 1.881 3.41 1.881 7.615 0 0-1.11 1.894-3.997 1.985z" fill="currentColor" class="text-indigo-50"></path></svg><div class="flex-auto"><h3 class="font-bold text-gray-900">Discord</h3><p>加入我们的 Discord 群组与其它的 Tailwind 用户交流。</p></div></a></li><li><a href="https://twitter.com/tailwindcss" class="flex items-start space-x-4"><svg fill="currentColor" class="flex-none text-light-blue-400 w-12 h-12"><rect width="48" height="48" rx="12"></rect><path d="M37.127 15.989h-.001a11.04 11.04 0 01-3.093.836 5.336 5.336 0 002.37-2.932 10.815 10.815 0 01-3.421 1.284 5.42 5.42 0 00-3.933-1.679c-2.976 0-5.385 2.373-5.385 5.3-.003.406.044.812.138 1.207a15.351 15.351 0 01-11.102-5.54 5.235 5.235 0 00-.733 2.663c0 1.837.959 3.461 2.406 4.413a5.338 5.338 0 01-2.449-.662v.066c0 2.57 1.86 4.708 4.32 5.195a5.55 5.55 0 01-1.418.186c-.34 0-.68-.033-1.013-.099.684 2.106 2.676 3.637 5.034 3.68a10.918 10.918 0 01-6.69 2.269 11.21 11.21 0 01-1.285-.077 15.237 15.237 0 008.242 2.394c9.918 0 15.337-8.077 15.337-15.083 0-.23-.006-.459-.017-.683a10.864 10.864 0 002.686-2.746l.007.008z" fill="currentColor" class="text-light-blue-50"></path></svg><div class="flex-auto"><h3 class="font-bold text-gray-900">Twitter</h3><p>关注 Tailwind 的推特账户，了解新闻和更新。</p></div></a></li><li><a href="https://www.youtube.com/tailwindlabs" class="flex items-start space-x-4"><svg fill="currentColor" class="flex-none text-red-500 w-12 h-12"><rect width="48" height="48" rx="12"></rect><path d="M36.83 18.556c0-2.285-1.681-4.124-3.758-4.124a184.713 184.713 0 00-8.615-.182h-.914c-2.925 0-5.799.05-8.612.183-2.072 0-3.753 1.848-3.753 4.133A75.6 75.6 0 0011 23.99a78.487 78.487 0 00.173 5.429c0 2.285 1.68 4.139 3.753 4.139 2.955.137 5.987.198 9.07.192 3.087.01 6.11-.054 9.069-.193 2.077 0 3.758-1.853 3.758-4.138.121-1.813.177-3.62.172-5.434a73.982 73.982 0 00-.165-5.428zM21.512 28.97v-9.979l7.363 4.987-7.363 4.992z" fill="currentColor" class="text-red-50"></path></svg><div class="flex-auto"><h3 class="font-bold text-gray-900">YouTube</h3><p>观看 Tailwind 的网络直播和专题教程。</p></div></a></li></ul></section></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json" crossorigin="anonymous">{"props":{"pageProps":{}},"page":"/docs","query":{},"buildId":"HgBbTMZ3YfwE_s19lauyf","nextExport":true,"autoExport":true,"isFallback":false,"head":[["meta",{"name":"viewport","content":"width=device-width"}],["meta",{"charSet":"utf-8"}],["meta",{"name":"twitter:site","content":"@tailwindcss"}],["meta",{"name":"twitter:description","content":"Documentation for the Tailwind CSS framework."}],["meta",{"name":"twitter:creator","content":"@tailwindcss"}],["meta",{"property":"og:url","content":"https://tailwindcss.com/docs"}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:description","content":"Documentation for the Tailwind CSS framework."}],["meta",{"property":"og:image","content":"https://tailwindcss.com/_next/static/media/twitter-large-card.85c0ff9e455da585949ff0aa50981857.jpg"}],["link",{"rel":"preconnect","href":"https://BH4D9OD16A-dsn.algolia.net","crossOrigin":"true"}],["title",{"children":"中文文档 - Tailwind CSS"}],["meta",{"name":"twitter:title","content":"中文文档 - Tailwind CSS"}],["meta",{"property":"og:title","content":"中文文档 - Tailwind CSS"}],["meta",{"name":"twitter:card","content":"summary"}],["meta",{"name":"twitter:image","content":"https://tailwindcss.com/_next/static/media/twitter-square.daf77586b35e90319725e742f6e069f9.jpg"}]]}</script><script crossorigin="anonymous" nomodule="">!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script crossorigin="anonymous" nomodule="" src="/_next/static/chunks/polyfills-b94cf467f33d5bbe5093.js"></script><script src="/_next/static/chunks/main-59b4822e49ee8af6cbd2.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/main-53486d82b2545edae223.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/webpack-07c5bcab23dc3e52a7c0.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/framework.dc32737cd22c934f019a.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/framework.dc32737cd22c934f019a.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/commons.a0844ced5e8df247f6dc.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/commons.22d76c353a4f72632887.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.badcd99128b41b157438.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.1d9cdb0d7e423ae8ff11.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/pages/_app-f73fc4f2530091cec505.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/pages/_app-22af6c3e18ff3a768b97.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/cecf69130dad263f9cb4ff787dd0f2dc73bfee9f.425fee7e5ce182155bfa.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/cecf69130dad263f9cb4ff787dd0f2dc73bfee9f.a38ff4d7f346d15b14bc.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/pages/docs-bd8e6e7ea96b88bcd0c7.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/pages/docs-fafc39d296fe4300f902.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_buildManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_buildManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_ssgManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_ssgManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script> </script></body></html>